import React, { useEffect,  } from 'react'; // 添加 useCallback
import { Layout, Menu, Dropdown, MenuProps } from 'antd'; // 引入 Form
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import {
  AppstoreOutlined,
  DashboardOutlined,
  FileTextOutlined,
  LogoutOutlined,
  TranslationOutlined,
  UserOutlined,
  DownOutlined,
  LockOutlined,
} from '@ant-design/icons';
import { logout } from '../store/slices/authSlice';
import { RootState } from '../store';

const { Header, Content, Footer } = Layout;

const MainLayout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const dispatch = useDispatch();
  const user = useSelector((state: RootState) => state.auth.user);

  const handleLogout = () => {
    dispatch(logout());
    navigate('/login');
  };
  const userMenuItems: MenuProps['items'] = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人信息',
      onClick: () => {
        navigate('/profile'); // 修改为导航到个人信息页面
      },
    },
    {
      key: 'changePassword',
      icon: <LockOutlined />,
      label: '修改密码',
      onClick: () => {
        navigate('/changePassword'); // 导航到修改密码页面
      },
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: handleLogout,
    },
  ];

  // 提取生成 menuItems 的逻辑到一个函数中
  const getMenuItems = () => {
    return [
      { key: '/dashboard', icon: <DashboardOutlined />, label: '首页', requiredRole: 2 },
      { key: '/languages', icon: <TranslationOutlined />, label: '语言管理', requiredRole: 2 },
      { key: '/components', icon: <AppstoreOutlined />, label: '组件管理', requiredRole: 1 },
      { key: '/users', icon: <UserOutlined />, label: '用户管理', requiredRole: 2 },
      { key: '/logs', icon: <FileTextOutlined />, label: '日志管理', requiredRole: 2 },
    ]
      .filter((item) => (user?.role || 1) >= item.requiredRole)
      .map(({ requiredRole, ...item }) => item);
  };

  const menuItems = getMenuItems();

  const selectedKeys = [location.pathname];

  useEffect(() => {
    if (!user) {
      navigate('/login');
    }
  }, [user, navigate]); // 使用 useCallback 来避免不必要的重新创建

  return (
    <Layout>
      <Header style={{ backgroundColor: '#fff', padding: '0 20px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ color: '#1890ff', fontSize: '25px', fontWeight: 'bold', paddingLeft: '12px' }}>多语言翻译管理系统</span>
          <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
            <a
              style={{ color: '#808080' }}
              onClick={(e) => e.preventDefault()}
              onMouseEnter={(e) => (e.currentTarget.style.color = '#1890ff')}
              onMouseLeave={(e) => (e.currentTarget.style.color = '#808080')}
            >
              {user?.nick_name || '用户'} <DownOutlined />
            </a>
          </Dropdown>
        </div>
      </Header>
      <div style={{ backgroundColor: '#fff', borderBottom: '1px solid #f0f0f0' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <Menu
            mode="horizontal"
            selectedKeys={selectedKeys}
            items={menuItems}
            onClick={({ key }) => navigate(key)}
            style={{ border: 'none' }}
          />
        </div>
      </div>
      <Content style={{ backgroundColor: '#f5f5f5', minHeight: 'calc(100vh - 184px)' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '24px 0' }}>
          {user ? <Outlet /> : null}
        </div>
      </Content>
      <Footer style={{ textAlign: 'center', backgroundColor: '#f0f0f0' }}>
        多语言翻译管理系统 ©2025 Created by <a href="https://gitee.com/GX19136670973">Seina666</a>
      </Footer>
    </Layout>
  );
};

export default MainLayout;